<!-- 统计 2022 2023 2024 年 在校生 总人数 -->

<template>
  <div ref="chart" class="charts" style="width: 100%; height: 30rem"></div>
</template>

<script setup>
    import { onMounted, ref } from 'vue';
    import * as echarts from 'echarts';

    const chart = ref(null);

    onMounted(() => {
    
        const element = chart.value;
        if (element) {
            const width = element.clientWidth;
            const height = element.clientHeight;
            console.log(`Width: ${width}px, Height: ${height}px`);
        } else {
        console.error('Element not found.');
        }


      const myChart = echarts.init(chart.value);

      myChart.setOption({

        title: {
            text: '吉安交通技工学校历年在校生总人数统计',
            left: 'center', // 文字水平居中
            top: 20, // 设置标题距离顶部的距离，单位像素
            bottom: 20, // 设置标题距离底部的距离，单位像素
            textStyle: {
                color: '#333', // 标题颜色
                fontSize: 18, // 标题字体大小
                fontWeight: 'bold' // 标题字体粗细
            }
        },
        
        xAxis: {
            type: 'category',
            data: ['2022', '2023', '2024']
        },

        yAxis: {
            type: 'value'
        },


        series: [
            {
                data: [800, 200, 400],
                type: 'line',
            }
        ],

        grid: {
          top: '20%', // 设置图表距离容器顶部的距离
          containLabel: true
        }
    
    })

    return {
      chart
    };
})

    
</script>


<style scoped>
    .charts canvas {
        top: 2rem;
    }
</style>